<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

setOptions(
  {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
      {
        name: "Pressure",
        type: "gauge",
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: "{value}"
        },
        data: [
          {
            value: 60,
            name: "疲劳"
          }
        ]
      }
    ]
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  },
  // 点击空白处
  {
    type: "zrender",
    name: "click",
    callback: params => {
      console.log("点击空白处", params);
    }
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
  <div class="mt-10">
    <p>
      心率变异（HRV）：45ms<br />
      静息心率：75次/分钟<br />
      最高心率：120次/分钟 (在日常活动中)<br />
      平均心率：85次/分钟<br />
      睡眠期间的最低心率：60次/分钟<br />
      睡眠期间的平均心率：70次/分钟疲劳指数：70/100<br />
      这些数据显示刘先生的心率在正常范围内，但是平均心率和静息心率稍高，这可能是由于疲劳和压力较高造成的
    </p>
  </div>
</template>
